import hljs from 'highlight.js';
import { IconContext } from 'react-icons';
import { GoFile, GoFileDirectory, GoGitCommit } from 'react-icons/go';
import ReactMarkdown from 'react-markdown';
import gfm from 'remark-gfm';
import Error from 'next/error';
import path from 'path';

const linkClasses = 'text-blue-600 hover:underline';
const listLinkClasses = 'hover:text-blue-600 hover:underline';

function getRawURL(pathArray) {
  const url = `/${pathArray[0]}/raw/${pathArray.slice(2).join('/')}`;
  return url;
}

function getLanguage(filename) {
  switch (path.extname(filename)) {
    case '.java':
      return 'java';
    case '.html':
    case '.xml':
      return 'xml';
    case '.md':
      return 'md';
    case '.c':
    case '.h':
      return 'c';
    case '.tex':
      return 'tex';
    case '.js':
      return 'js';
    case '.fs':
      return 'fs';
    case '.elm':
      return 'elm';
    case '.json':
      return 'json';
    case '.py':
      return 'py';
    case '.css':
      return 'css';
    default:
      return 'plaintext';
  }
}

function isImage(filename) {
  switch (path.extname(filename)) {
    case '.gif':
      return true;
    case '.jpeg':
    case '.jpg':
      return true;
    case '.png':
      return true;
    case '.tiff':
    case '.tif':
      return true;
    default:
      return false;
  }
}

function makeBreadCrumbObj(name, pathArray) {
  const breadCrumbObj = {
    name: name,
    href: `/${pathArray.join('/')}`,
  };

  return breadCrumbObj;
}

async function getServerSideProps(context) {
  const res = await fetch(`http://localhost:3000/api${context.resolvedUrl}`);
  const data = await res.json();

  if (data.resultType === 'notFound') {
    return { notFound: true };
  } else {
    return { props: { data } };
  } 
}

function Button({ label, url }) {
  return (
    <a className={'block px-4 py-1.5 border border-slate-300 rounded-lg'} href={url}>{label}</a>
  );
}

function RepositoryListing({ repositories }) {
  return (
    <ul className={'text-2xl divide-y divide-slate-300'}>
      {repositories.map((repo) => (
        <li className={'p-6'}>
          <a className={linkClasses} href={`/${repo.name}`}>{repo.name}</a>
        </li>
      ))}
    </ul>
  );
}

function MainContentContainer({ children }) {
  return (
    <div className={'border border-slate-300 rounded-lg px-12 py-8'}>
      {children}
    </div>
  );
}

function BreadCrumbTrail({ pathArray }) {
  const recursion = (acc) => {
    if (acc.length === pathArray.length - 4) {
      return acc;
    } else {
      const subArray = pathArray.slice(0, 1).concat('tree', pathArray.slice(2, acc.length + 4));
      const breadCrumb = makeBreadCrumbObj(pathArray[acc.length + 3], subArray);
      const newAcc = acc.concat([breadCrumb]);
      return recursion(newAcc);
    }
  };

  if (pathArray.length < 4) {
    return null;
  }

  let rootArray;

  if (pathArray[2] === 'master') {
    rootArray = pathArray.slice(0, 1);
  } else {
    rootArray = pathArray.slice(0, 1).concat('tree', pathArray[2]);
  }

  const headBreadCrumb = makeBreadCrumbObj(pathArray[0], rootArray);
  const tailBreadCrumbs = recursion([]);
  const breadCrumbs = [headBreadCrumb].concat(tailBreadCrumbs);

  return (
    <div className={'text-2xl flex-1'}>
      {breadCrumbs.map((breadCrumb) => (
        <span> <a className={linkClasses} href={breadCrumb.href}>{breadCrumb.name}</a> /</span>
      ))}
      <span> {pathArray[pathArray.length - 1]}</span>
    </div>
  );
}

function DirectoryListing({ resultContent, resultPath }) {
  const makeURL = (repoRequest, item) => {
    const parentTail = resultPath.length > 2 ? resultPath.slice(2) : ['master'];
    const parentPath = resultPath.slice(0, 1).concat(repoRequest, parentTail);
    const url = `/${parentPath.join('/')}/${item}`;
    return url;
  }
  
  return (
    <MainContentContainer>
      <ul className={'text-lg divide-y divide-slate-300'}>
        {resultContent.trees.map((item) => (
          <li className={'h-12 flex items-center'}>
            <div className={'pr-4'}>
              <IconContext.Provider value={{ size: '1.5em', className: 'text-blue-400' }}>
                <GoFileDirectory />
              </IconContext.Provider>
            </div>
            <a className={listLinkClasses} href={makeURL('tree', item)}>{item}</a>
          </li>
        ))}
        {resultContent.blobs.map((item) => (
          <li className={'h-12 flex items-center'}>
            <div className={'pr-4'}>
              <IconContext.Provider value={{ size: '1.5em', className: 'text-slate-500' }}>
                <GoFile />
              </IconContext.Provider>
            </div>
            <a className={listLinkClasses} href={makeURL('blob', item)}>{item}</a>
          </li>
        ))}
      </ul>
    </MainContentContainer>
  );
}

function CommitListing({ resultContent, resultPath }) {
  const subArray = resultContent.slice(1);
  
  return (
    <MainContentContainer>
      <IconContext.Provider value={{ size: '1.5em', className: 'text-slate-500' }}>
        <ul className={'text-lg divide-y divide-slate-300'}>
          <li className={'h-12 flex items-center'}>
            <div className={'pr-4'}>
              <GoGitCommit />
            </div>
            <a className={listLinkClasses} href={`/${resultPath[0]}`}>
              {resultContent[0].message}
            </a>
          </li>
          {subArray.map((item) => (
            <li className={'h-12 flex items-center'}>
              <div className={'pr-4'}>
                <GoGitCommit />
              </div>
              <a className={listLinkClasses} href={`/${resultPath[0]}/tree/${item.id}`}>
                {item.message}
              </a>
            </li>
          ))}
        </ul>
      </IconContext.Provider>
    </MainContentContainer>
  );
}

function ReadmeDisplay({ resultContent, resultPath }) {
  const imageURITransformer = (uri) => `/${resultPath[0]}/raw/master/${uri}`;
  const titleClasses = 'text-2xl text-slate-800 pb-4 border-b border-slate-300';
  const articleClasses = 'pt-4 prose prose-xl prose-slate max-w-none prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline';
  
  return (
    <MainContentContainer>
      <p className={titleClasses}><strong>{resultContent.readmeName}</strong></p>
      <article className={articleClasses}>
        <ReactMarkdown
          remarkPlugins={[gfm]}
          transformImageUri={imageURITransformer}
          children={resultContent.readmeBlob}
        />
      </article>
    </MainContentContainer>
  );
}

function LineNos({ textBlob }) {
  const count = textBlob.split('\n').length;
  const lineNos = [...Array(count).keys()].map((x) => x + 1).join('\n');

  return (
    <pre className={'text-right text-slate-400'}>
      {lineNos}
    </pre>
  );
}

function CodeBlock({ textBlob, resultPath }) {
  const language = getLanguage(resultPath[resultPath.length - 1]);
  const highlightedHTML =
    hljs.highlight(textBlob, { language: language, ignoreIllegals: true }).value;
  
  return (
    <pre>
      <code dangerouslySetInnerHTML={{ __html: highlightedHTML }} />
    </pre>
  );
}

function TextDisplayGrid({ textBlob, resultPath }) {
  return (
    <div className={'flex'}>
      <div className={'overflow-x-auto'}>
        <CodeBlock textBlob={textBlob} resultPath={resultPath} />
      </div>
      <div className={'pr-8 order-first'}>
        <LineNos textBlob={textBlob} />
      </div>
    </div>
  );
}

function TextBlobArea({ resultContent, resultPath }) {
  return (
    <MainContentContainer>
      <div className={'flex justify-end'}>
        <Button label={'Raw'} url={getRawURL(resultPath)} />
      </div>
      <TextDisplayGrid textBlob={resultContent} resultPath={resultPath} />
    </MainContentContainer>
  );
}

function BinaryBlobArea({ resultPath }) {
  let binaryDisplay;
  
  if (isImage(resultPath[resultPath.length - 1])) {
    binaryDisplay = <img src={getRawURL(resultPath)} alt={'Embedded Image.'} />;
  } else {
    binaryDisplay = <p className={'text-center text-xl'}>Binary content cannot be displayed.</p>;
  }
  
  return (
    <MainContentContainer>
      <div className={'flex justify-end'}>
        <Button label={'Download'} url={getRawURL(resultPath)} />
      </div>
      {binaryDisplay}
    </MainContentContainer>
  );
}

function MidSection({ resultPath }) {
  return (
    <div className={'h-20 p-4 flex justify-end items-center'}>
      <BreadCrumbTrail pathArray={resultPath} />
      <Button label={'History'} url={`/${resultPath[0]}/commits`} />
    </div>
  );
}

function PageSubstance({ data }) {
  switch (data.resultType) {
    case 'home':
      return <RepositoryListing repositories={data.resultContent} />;

      break;
    case 'rootDirectory':
      return (
        <div>
          <MidSection resultPath={data.resultPath} />
          <DirectoryListing
            resultContent={data.resultContent.entryNamesSorted}
            resultPath={data.resultPath}
          />
          {data.resultContent.readmeExists && (
            <div className={'h-16'} />
          )}
          {data.resultContent.readmeExists && (
            <ReadmeDisplay
              resultContent={data.resultContent}
              resultPath={data.resultPath}
            />
          )}
        </div>
      );
      
      break;
    case 'nonRootDirectory':
      return (
        <div>
          <MidSection resultPath={data.resultPath} />
          <DirectoryListing
            resultContent={data.resultContent}
            resultPath={data.resultPath}
          />
        </div>
      );
      
      break;
    case 'textBlob':
      return (
        <div>
          <MidSection resultPath={data.resultPath} />
          <TextBlobArea
            resultContent={data.resultContent}
            resultPath={data.resultPath}
          />
        </div>
      );

      break;
    case 'binaryBlob':
      return (
        <div>
          <MidSection resultPath={data.resultPath} />
          <BinaryBlobArea resultPath={data.resultPath} />
        </div>
      );

      break;
    case 'commits':
      return (
        <div>
          <MidSection resultPath={data.resultPath} />
          <CommitListing
            resultContent={data.resultContent}
            resultPath={data.resultPath}
          />
        </div>
      );
      
      break;
  }
}

function Header({ resultPath }) {
  return (
    <header className={'h-28 p-4 bg-slate-100 border-b border-slate-300'}>
      <div className={'pl-8 text-4xl'}>
        <a className={linkClasses} href={'/'}>cleanslatesoftware.com</a>
        {resultPath.length > 0 && (
          <span> / <a className={linkClasses} href={`/${resultPath[0]}`}>{resultPath[0]}</a></span>
        )}
      </div>
    </header>
  );
}

function Main({ data }) {
  switch (data.resultType) {
    case 'home':
    case 'rootDirectory':
    case 'nonRootDirectory':
    case 'textBlob':
    case 'binaryBlob':
    case 'commits':
      return (
        <div>
          <Header resultPath={data.resultPath} />
          <main>
            <div className={'container mx-auto px-8'}>
              <PageSubstance data={data} />
            </div>
          </main>
          <footer className={'h-48'}></footer>
        </div>
      );

      break;
    default:
      return <Error statusCode={'500'} title={'Internal server error, try reloading the page'} />;
  }
}

export { getServerSideProps };
export default Main;